<template>
    <li>
        <label>
            <input type="checkbox" :checked="todo.done" @change="checkTodo(todo.id)"/>
            <span v-show="!todo.isEdit">{{todo.title}}</span>
            <input 
            v-show="todo.isEdit" 
            type="text" 
            :value="todo.title" 
            @blur="handleBlur(todo,$event)"
            ref="inputTitle"
            >
        </label>
        <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
        <button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button>
    </li>
</template>
<script>
import { mapActions } from 'vuex'
export default {
    name:'UserItem',
    props:['todo'],
    methods:{
        ...mapActions(['checkTodo','handleDelete','handleBlur']),
        handleEdit(todo){   
            this.$store.dispatch('handleEdit',todo);
            //点击编辑后自动获取焦点
            this.$nextTick(function(){
                this.$refs.inputTitle.focus()
            })
        },
        //失去焦点，输入框变文字，并把输入的数据呈现出来
        handleBlur(todo,e){
            todo.isEdit = false
            if(!e.target.value.trim()){
                alert('输入不能为空！')
                return 
            }
            if(todo.id === todo.id){
                todo.title = e.target.value
            }
        }
    }
}
</script>

<style scoped>
 /*item*/
 li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 2px solid #ddd;
}

li label {
    float: left;
    cursor: pointer;
}

li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
}
li button {
    float: right;
    display: none;
    margin-top: 3px;
}

li:before {
    content: initial;
}

li:last-child {
    border-bottom: none;
}

li:hover {
    background-color: #ddd;
}
li:hover button{
    display: block;
}
</style>